.cm-top-nav-box {
  background-color: #37ACE1;
  justify-content: space-between;
  display: flex;
  align-items: center;
  height: 116px;
  .icon-left {
    font-size: 38px;
    align-self: stretch;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #2AA2D9;
  }
  & > span {
    color: #fff;
    font-size: 40px;
    flex: 6;
    text-align: right;
    padding-right: 30px;
  }
}

.cm-line-text-box {
  display: flex;
  justify-content: space-between;
  padding: 28px;
  margin-bottom: 30px;
  background-color: #F7F7F7;
  & > span {
    &:first-child {
      color: #555555;
      font-size: 32px;
    }
    &.cm-right-text {
      color: #F67363;
      font-size: 28px;
    }
  }
}

.cm-navbar-box {
  display: flex;
  height: 96px;
  background-color: @color-secondary;
  color: #fff;
  font-size: 32px;
  // margin-bottom: 20px; // todo fixed other bug caused by this line commented
  i {
    font-size: 40px;
    font-weight: bold;
    flex: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    flex: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5%;
  }
}

.cm-text-box {
  padding: 14px 0 14px 22px;
  color: #fff;
  background-color: @color-primary;
}

.cm-margin-top {
  // margin-top: 20px !important;
  margin-top: 20px !important;
}

// user avatar box of the circle
.cm-avatar-circle {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: yellow;
}